// components/SkeletonPlaceholder.tsx
import React from 'react';
import {View, StyleSheet} from 'react-native';
import HorizontalSkeleton from './HorizontalSkeleton';
import VerticalSkeletion from './VerticalSkeletion';
import {normalize} from '../../utils/adapter';

export default function VideoListSkeleton() {
  return (
    <View style={styles.container}>
      <View style={styles.cover_view}>
        <HorizontalSkeleton />
        <HorizontalSkeleton />
      </View>
      <View style={styles.list_view}>
        <View style={styles.row_view}>
          <VerticalSkeletion />
          <VerticalSkeletion />
          <VerticalSkeletion />
        </View>
        <View style={styles.row_view}>
          <VerticalSkeletion />
          <VerticalSkeletion />
          <VerticalSkeletion />
        </View>
        <View style={styles.row_view}>
          <VerticalSkeletion />
          <VerticalSkeletion />
          <VerticalSkeletion />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 60,
    paddingHorizontal: 20,
    backgroundColor: '#fff',
  },
  cover_view: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  list_view: {
    flex: 1,
  },
  row_view: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: normalize(46),
  },
});
